<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img src="@/assets/img/main/logo.png" alt="logo" />
      </div>
      <a-menu theme="dark" mode="inline" :selected-keys="[selectedKey]" @click="handleMenuClick">
        <a-menu-item key="ap-home">
          <a-icon type="bar-chart" />
          <span>主页</span>
        </a-menu-item>
        <a-menu-item key="approval-list">
          <a-icon type="build" />
          <span>查看报题列表</span>
        </a-menu-item>
        <a-menu-item key="add-approval">
          <a-icon type="bulb" />
          <span>提交报题</span>
        </a-menu-item>
        <a-menu-item key="my-applications">
          <a-icon type="file-add" />
          <span>我的提交</span>
        </a-menu-item>
        <a-menu-item key="applications-workmember">
          <a-icon type="highlight" />
          <span>我的报题</span>
        </a-menu-item>
        <a-sub-menu key="approval">
          <span slot="title">
            <a-icon type="bell" />
            <span>我的审批</span>
          </span>
          <a-menu-item key="pending-approver">
            <span>待审批</span>
          </a-menu-item>
          <a-menu-item key="approved-approver">
            <span>已审批</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="approval-user" v-if="isAdmin">
          <a-icon type="pull-request" />
          <span>报题审核权限</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <a-icon type="user" /> {{ userInfo.person_name || '未登录' }}
              <a-icon type="down" />
            </a>
          </a-dropdown>
        </div>
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '16px', background: '#fff', minHeight: 'calc(100vh - 64px - 48px)',overflowY: 'auto'}">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
  import {
    apiApprovalGetPendingList
  }
  from '@/api/featch.js'

  export default {
    name: 'ov-main',
    data() {
      return {
        collapsed: false,
        selectedKey: '',
        userInfo: {},
        intervalFlag: null,
        personInfo: {},
        total: 0,
      }
    },
    computed: {
      isAdmin() {
        return this.userInfo.role_main === '系统管理员'
      },
      isDepart() {
        return this.userInfo.role_main === '部门负责人'
      },
      isDriver() {
        let flag = false
        this.drivers.map(item => {
          if (item.person_id === this.userInfo.person_id) {
            flag = true
          }
        })
        return flag
      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(route) {
          const menuKeyMap = {
            '/ap-main/ap-home': 'ap-home',
            '/ap-main/add-approval': 'add-approval',
            '/ap-main/approval-list': 'approval-list',
            '/ap-main/approved-approver': 'approved-approver',
            '/ap-main/pending-approver': 'pending-approver',
            '/ap-main/my-applications': 'my-applications',
            '/ap-main/approval-user': 'approval-user',
            '/ap-main/applications-workmember': 'applications-workmember',
          }
          this.selectedKey = menuKeyMap[route.path] || ''
        }
      }
    },
    mounted() {
      // 获取用户信息
      const personInfo = window.sessionStorage.getItem('person_info')
      if (personInfo) {
        this.userInfo = JSON.parse(personInfo)
      }

      this.getUserInfo()
    },
    methods: {
      handleMenuClick({
        key
      }) {
        const path = {
          'ap-home': '/ap-main/ap-home',
          'add-approval': '/ap-main/add-approval',
          'approval-list': '/ap-main/approval-list',
          'approved-approver': '/ap-main/approved-approver',
          'pending-approver': '/ap-main/pending-approver',
          'my-applications': '/ap-main/my-applications',
          'approval-user': '/ap-main/approval-user',
          'applications-workmember': '/ap-main/applications-workmember',
        } [key]

        if (path && path !== this.$route.path) {
          this.$router.push(path).catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              console.error('导航错误:', err)
            }
          })
        }
      },
      async getUserInfo() {
        const personInfo = await JSON.parse(window.sessionStorage.getItem('person_info') || '{}')
        this.personInfo = personInfo
        this.openNotification()
      },
      openNotification() {
        const params = {
          page: 1,
          page_size: 100,
          approver_id: this.personInfo.person_id
        }
        apiApprovalGetPendingList(params).then(res => {
          if (res.code === 200) {
            this.total = res.data.pagination.total || 0
            if (this.total != 0) {
              this.$notification.open({
                key: `apiApprovalGetPendingList`,
                message: '您有新的待审批',
                description: `您总共有共计【${this.total}】条待审批`,
                placement: `bottomRight`
              })
            }
          } else {
            this.$message.error(res.message)
          }
        })

        this.intervalFlag = setInterval(() => {
          const params = {
            page: 1,
            page_size: 100,
            approver_id: this.personInfo.person_id
          }
          apiApprovalGetPendingList(params).then(res => {
            if (res.code === 200) {
              this.total = res.data.pagination.total || 0
              if (this.total != 0) {
                this.$notification.open({
                  key: `apiApprovalGetPendingList`,
                  message: '您有新的待审批',
                  description: `您总共有共计【${this.total}】条待审批`,
                  placement: `bottomRight`
                })
              }
            } else {
              this.$message.error(res.message)
            }
          })
        }, 30 * 1000)
      },
    }
  }
</script>

<style scoped>
  #components-layout-demo-custom-trigger {
    height: 100vh;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001529;
  }

  .logo img {
    height: 32px;
  }

  .header-right {
    float: right;
    margin-right: 24px;
  }

  .ant-dropdown-link {
    color: rgba(0, 0, 0, 0.65);
  }

  .ant-dropdown-link:hover {
    color: #1890ff;
  }
</style>